<template>
  <view>
    <view style="display: flex;justify-content: flex-end;margin-top: 20rpx;">
      <view class="searchType" :class="[typeSel === 0 ? 'search-sel' : 'search-nosel']" @click="handleSel(0)">
        趋势
      </view>
      <view class="searchType" :class="[typeSel === 1 ? 'search-sel' : 'search-nosel']" @click="handleSel(1)">
        参数
      </view>
    </view>
    <view v-show="typeSel === 0">
      <!-- #ifdef APP-PLUS || H5 -->
      <view class="content echarts" @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts"
        :height='500' id="echarts3"></view>
      <!-- #endif -->
      <!-- #ifndef APP-PLUS || H5 -->
      <view>非 APP、H5 环境不支持</view>
      <!-- #endif -->
    </view>
    <view v-show="typeSel === 1">
      <u-table class="page-table">
        <u-tr>
          <u-th>名称</u-th>
          <u-th>公允价值</u-th>
          <u-th>面积</u-th>
          <u-th>类型</u-th>
          <u-th>比例</u-th>
          <u-th>增值</u-th>
        </u-tr>
        <u-tr v-for="(item,index) in valueList" :key="index">
          <u-td>{{item.name}}</u-td>
          <u-td>{{item.fairPrice}}</u-td>
          <u-td>{{item.plane}}</u-td>
          <u-td>{{item.type}}</u-td>
          <u-td>{{item.proportion}}</u-td>
          <u-td>{{item.addedValue}}</u-td>
        </u-tr>
      </u-table>
    </view>

  </view>
</template>

<script>
  import echarts from '../../../../../static/common/js/echarts.min.js'
  export default {
    props: {
      //地图级别
      level: {
        type: Number,
        default: 1
      },
      //区域IDs
      provinceIds: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        //查询类型
        typeSel: 0,

        option: {
          grid: {
            borderWidth: 0,
            left: '2%',
            right: '2%',
            top: '10%',
            bottom: 95,
            textStyle: {
              color: "#fff"
            },
            containLabel: true
          },
          legend: {
            left: 5,
            top: '2%',
            textStyle: {
              color: '#333',
              fontSize: 14
            },
            itemWidth: 16,
            itemHeight: 8,
            data: ['增值指数', '原值', '共允值']
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisTick: { // X轴线 刻度线 
              show: true,
              length: 5,

              lineStyle: {
                color: '#cccccc',
                type: 'solid',
                width: 1
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#cccccc'
              }
            },
            axisLabel: {
              color: '#cccccc',
              interval: 0
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            data: []
          },
          yAxis: [{
              type: "value",
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#cccccc'
                }
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: '#ccc'
              },
              axisTick: {
                show: false,
              },
              min: 0,
              max: 7000,
              interval: 1000,
              axisLabel: {
                formatter: '{value}万'
              }
            },
            {
              type: "value",
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: '#cccccc'
                }
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: '#ccc'
              },
              axisTick: {
                show: false,
              },
              min: -40,
              max: 100,
              interval: 20,
              axisLabel: {
                formatter: '{value}%'
              }
            }
          ],
          dataZoom: [{
            type: 'slider',
            show: true,
            "filterMode": "empty",
            "disabled": false,
            bottom: '18%',
            left: '2%',
            right: '2%',
            // bottom: '15%',
            width: '95%',
            height: 15,
            start: 0,
            end: 50,
            xAxisIndex: 0,
            showDetail: false // 即拖拽时候是否显示详细数值信息 默认true
          }],
          series: [{
            name: "原值",
            type: "bar",
            stack: "总量",
            barMaxWidth: 15,
            barGap: "5%",
            itemStyle: {
              "normal": {
                "color": '#0071cf'
              }
            },
            data: []
          }, {
            name: "共允值",
            type: "bar",
            stack: "总量",
            barMaxWidth: 15,
            barGap: "5%",
            itemStyle: {
              normal: {
                "color": '#ef831a',
                "barBorderRadius": 0
              }
            },
            data: []
          }, {
            name: "增值指数",
            yAxisIndex: 1,
            type: "line",
            symbolSize: 8,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: '#00ca95',
                barBorderRadius: 0,
              }
            },
            lineStyle: {
              width: 1,
              normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .1)',
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ], false),
                shadowColor: 'rgba(0,202,149, 0.2)',
                shadowBlur: 20
              }
            },
            data: []
          }, ]
        },
        valueList: []
      }
    },
    watch: {
      immediate: true,
      provinceIds: function(newQuestion, oldQuestion) {
        this.loadDataByType()
      }
    },
    mounted() {
      this.loadDataByType()
    },
    methods: {
      //根据条件查询不同数据 区域/公司
      loadDataByType() {
        let _query = {
          level: this.level,
        }
        if (this.provinceIds) {
          _query.provinceIds = this.provinceIds
        }
        this.$u.api.statisticsAssetValue(_query).then(res => {
          if (!res) {
            return
          }
          //参数页列表数据
          this.valueList = res

          let _name = []
          let _new1 = []
          let _new2 = []
          let _new3 = []

          console.log(res)
          
          
          res[1].registerPrice = 1500
          res[1].fairPrice = 3000
          res[1].addedValue = 60
          
          res[3].registerPrice = 3000
          res[3].fairPrice = 1000
          res[3].addedValue = -30

          for (let i = 0; i < res.length; i++) {
            _name.push(res[i].name)
            if (res[i].type == "增值") {
              _new1.push(Number(res[i].registerPrice))
              _new2.push(Number(res[i].fairPrice))
            } else {
              let _bottom = {
                value: Number(res[i].fairPrice),
                itemStyle: {
                  "color": '#ef831a',
                  "barBorderRadius": 0
                }
              }
              let _top = {
                value: Number(res[i].registerPrice),
                itemStyle: {
                  "color": '#0071cf',
                  "barBorderRadius": 0
                }
              }
              
                _new1.push(_bottom)
                _new2.push(_top)
            }
            _new3.push(Number(res[i].addedValue))
          }
          this.option.xAxis.data = _name
          this.option.series[0].data = _new1
          this.option.series[1].data = _new2
          this.option.series[2].data = _new3
        }).catch(err => {
          console.error(err)
        })
      },

      getSerNewData(name, color, type) {
        let _new = {
          name: name,
          type: type,
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          barCategoryGap: "88rpx",
          data: [],
          itemStyle: {
            normal: {
              color: color
            }
          }
        }
        return _new
      },
      //初始化报表数据配置
      // initData() {
      //   let _ser = {
      //     barCategoryGap: "44rpx",
      //     itemStyle: {
      //       color: "#0071C5"
      //     },
      //     data: [],
      //     type: 'bar'
      //   }
      //   this.option.xAxis.data = this.xdata
      //   var _obj = JSON.stringify(this.ydata)
      //   _ser.data = JSON.parse(_obj)
      //   return _ser
      // },
      //点击按钮事件
      handleSel(selIndex) {
        if (this.typeSel != selIndex) {
          this.typeSel = selIndex
          // this.loadDataByType()
        }
      },
      //报表柱体点击事件
      onViewClick(options) {
        // //初始化基础数据
        // let _ser = this.initData()
        // //找到被点击柱体
        // let _index = this.xdata.findIndex((item) => {
        //   return item == options.name
        // })
        // //改变被点击柱体的样式
        // this.selectStyle.value = this.ydata[_index]
        // _ser.data[_index] = this.selectStyle
        // //改变报表数据
        // this.option.series = []
        // this.option.series.push(_ser)
      }
    }
  }
</script>

<script module="echarts" lang="renderjs">
  let myChart
  export default {
    data() {
      return {
        opntions: [],
      }
    },
    mounted() {
      if (typeof window.echarts === 'function') {
        this.initEcharts()
      } else {
        // 动态引入较大类库避免影响页面展示
        const script = document.createElement('script')
        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
        script.src = 'static/common/js/echarts.min.js'
        this.opntions = this.option
        script.onload = this.initEcharts.bind(this)
        document.head.appendChild(script)
      }
    },
    methods: {
      initEcharts() {
        myChart = echarts.init(document.getElementById('echarts3'))
        // // myChart.setOption(this.opntions)
        // setTimeout(myChart.setOption(this.opntions), 500)

        // // echarts的点击事件
        // myChart.on('click', async params => {
        //   // 把点击事件的数据缓存下来
        //   this.clickData = params;
        //   await this.$ownerInstance.callMethod('onViewClick', {
        //     value: this.clickData.data,
        //     name: this.clickData.name,
        //     seriesName: this.clickData.seriesName
        //   })
        //   //  // 上次点击数据置空
        //   this.clickData = null;
        // })
      },
      updateEcharts(newValue, oldValue, ownerInstance, instance) {
        // 监听 service 层数据变更
        setTimeout(myChart.setOption(newValue), 500)

      },
      onClick(event, ownerInstance) {
        // 调用 service 层的方法
        // ownerInstance.callMethod('onViewClick', {
        // 	test: 'test'
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
  // .content {
  //   display: flex;
  //   flex-direction: column;
  //   align-items: center;
  //   justify-content: center;
  // }

  .echarts {
    margin-top: 10rpx;
    width: 100%;
    height: 900rpx;
  }

  .searchType {
    width: 128rpx;
    height: 54rpx;
    border-radius: 66rpx;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 54rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40rpx;
  }

  .search-nosel {
    background: #F5F7F9;
    color: #999999
  }

  .search-sel {
    background: #0071C5;
    color: #FFFFFF;
  }

  .page-table {
    margin-top: 30rpx;
  }
</style>
